/*
  学习目标：根据id，更新一条任务
*/

import React, { useState } from 'react';
import Footer from './components/Footer';
import Header from './components/Header';
import Main from './components/Main';
import './styles/base.css';
import './styles/index.css';

export default function App(params) {
  const [list, setList] = useState([
    { id: 1, task: '学习Vue3', isDone: true },
    { id: 2, task: '学习TS', isDone: true },
    { id: 3, task: '学习React', isDone: false },
  ]);

  const handleDelById = (id) => {
    const newList = list.filter((item) => item.id !== id);
    setList(newList);
  };

  // 1. App中定义更新的方法
  const handleUpdateById = (id) => {
    // const index = list.findIndex((item) => item.id === id);
    // const newList = [...list];
    // newList[index].isDone = !newList[index].isDone;

    // setList(newList);
    const newList = list.map((item) => ({
      ...item,
      isDone: item.id === id ? !item.isDone : item.isDone,
    }));

    setList(newList);
  };

  return (
    <section className="todoapp">
      <Header />
      <Main
        list={list}
        handleDelById={handleDelById}
        // 2. 通过props传递更新的函数
        handleUpdateById={handleUpdateById}
      />
      <Footer />
    </section>
  );
}
